<template>
  <div >
    <div id="UEgineContainer">
      <div ref="move" style="position: fixed;cursor: move;border: 1px solid black;" :style="style">按钮测试</div>
<!--      <div class="drag" ref="el" :style="style">-->
<!--        Drag me! I am at {{x2}}, {{y2}}-->
<!--      </div>-->
    </div>
    <el-form :inline="true" >
      <el-form-item>
        <el-button @click="setA">视角特写</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="setB">漫游</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="setC">定位构件</el-button>
      </el-form-item>
      <el-form-item>
        <el-slider style="width: 100px" v-model="sVal" @change="sliderChange" />
      </el-form-item>
    </el-form>
    <el-dialog
        v-model="dialogVisible"
        title="Tips"
        width="30%"
        :before-close="handleClose"
    >
      <span>This is a message</span>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang='ts' setup>
  import { onMounted, onUnmounted, ref, nextTick } from "vue"
  import UE from "@/utils/BimGisPackage/engine.js"

  onMounted(() => {
    initUE()
    initModel()
  })

  onUnmounted(() => {

  })

  const token = "cbe8c300dfb0280d71bf6546087c6d2fa49260085f53fca839250d1a0f4299ed5d05f0b50d2dd5f343ee48280783fe3c650ab2f45733d3c4c53e1b19f6561250258c47f45b34485a2edb350010e2f42cd5b388af45c6b0706c69755ac3a3919983c9b8b6889aa2ec240165fc2f709cac7c1f7e39e9971b8af90df2d18171354f6b56cd7915dd8a19c86699e010040e34a321835a1d0cd4d453274bf275b0ab438a94867b381ae88ecd6668e8ca6b6d286dce7e5d799b0a175d5afe5554a43322ae16688bbb8ce0119ef7d58ff40b0e777c900bdcf71f5cb6407febff6beb5b39450d7fc8c8452aa23013404ec41c18c93282a8f0c4278b094aac2870036e9468918c6819c02334fbc0f8ac6323953580d32b1cdbecb9bf3a957cb1a91f35f08a0f47d3e6124e45078fcccb440810aac99742c749dda981087abb6e8cb8b1e89237e40a524d2bbb8599a991777d21e7823e88c9264a91404ad3c355b1486472d2d33d2024825618177d6fdab307e075f86fd6ba535458df7b840efa284b50840eefc6d4ffdc9011ea24d736db704d8954950390941b9aaa80089e41bf1a87879de6cd674b6676107f3d4256820c37cd19030c6924517e4349f71e19f74e660313cf3630a2823a9a2dc2a17ec077fd21bfa7550ed054853e32510f8a6ea5c1dff98b6284e2288790dacf3630a2823a9a2d22bd09a00b213aae3866768ae2f24dde6784fbf292c2cba17b7134e53eaa4f83b046182095e9d992f79b33aea9c3effb017d98bd95ced22c1d7f698eff812326d9564ab38044f775710f4346a9b49c876811ebc9d35b8ef21ede57cffe2a849264fc40a8fa840327c99acddc41a473429fd6d34f2a62e59aa4596f82cf86665b367e01045009c18a50fbde6b13f859564b7c9002a5b14cebb57369802f23c1aa6b290529357b344bdb8530020c38350b8b9972a74fa4180c4f55cee6813c71e7623592716f2ec8c4e239e84d93964421aba21f648969dd96385003f62e4a86b6b1d30fdb94d772769a9de93c9647e4a12370cdf7d47b23d92e9fde5f0e7f5669508068b4ae554551950390941b9aaa80b7a14bc8fab29bf7c50b8060c5eea5d5e8e734ad48ffdf7078d4a2032ceade1b19e3d8c0fb53857480738d2622956e35e1662b6393c298f213004a4971ac912a3e95f917ee0923c9af0e677d8f95321f4378b2dc8f6c570b1b0c8471c318fc4ef69087bf57c16c40ebc424f09f933d0eb1a881ed05ca8d5c665e8d49164a81ede6cd674b6676107f3a6090d0f582280bab0aa79efdb758515e3f8253971ef20b10b7b200fbc7c3d39e62c1f70c675390b7f097dc36860acbc7340ab80e00c255c3d61f7cf5f649cb0f9b84173857a7b67c27928b58b4a6a65f517a43f106335e8b1d5c423a17172341187054ec673ebd6c69755ac3a39199b4f7334f4c0447de753151533a277044a6403869fa3023ab70e2ffb0f223e4e266188accccc2c901f230f78b7aa0c960753151533a2770446a6cb07b672285d2afafd0506174e86853e3e8a5ebf625bfafafd0506174e868046aea1d307c2532afafd0506174e868af24d88c02bccfae733d4b8fe932b6af1847f5ba627d078cd2dac29d33a580c8e533a3246e10d1f33e29e57e80f22ab703944a96b7dfe879"
  const modelPath = "http://10.192.58.94:18086/Tools/output/model/202308291028360064/root.glt"
  const modelId = "h"
  let sVal = ref(1)
  let fID = ""
  let fIDList: any = []
  const dialogVisible = ref(false)

  const handleClose = (done: () => void) => {
    console.log(11)
  }

  function initUE() {
    const defaults_UE = {
      serverIP: `10.192.58.94`, //服务IP地址 具体见引擎服务控制台
      port: 8000, //HTTP端口 具体见引擎服务控制台
      useHttps: false, //是否使用Https
      container: `UEgineContainer`, //[必须]引擎场景容器ID
      // Token 可从引擎工作站下载 （必须）不传入则无法加载模型
      secretKey: token,
    }
    UE.api = new SAPI(defaults_UE, () => {
      // 取消云层
      UE.api.Public.setCloud({
        scale: 0
      })
    })
  }

  // 加载模型
  function initModel() {
    UE.api.Model.add(
      modelPath,
      modelId,
      (res: any) => {
        console.log("加载中", res)
      },
      (res: any) => {
        // 设置呼吸灯
        UE.api.Lights.addBreathingLamp ({
          FeatureID: ["h^2000405477488"],
          RespiratoryRate: 1,
          Color: "rgba(255,0,0,1)",
          FlashingColor: "rgba(0,0,204,1)",
          Intensity: 10
        })
        // 自发光
        UE.api.Feature.setEmissiveColor(  {
          modelId: "h",
          featureId: "h^2000405453376",
          color: "rgba(255,0,0,1)",
          strength: 10
        })
        // 设置视角
        UE.api.Camera.setViewPort({
          "world": {
            location:{x: -2321.701171875, y: -74521.1015625,z: 50223.3125},
            rotation:{x: 6.037694788574299e-7,y: -28.259029388427734,z: 90.94789123535156},
            origin:{x: 108.87999725341797,y: 34.20000076293945,z: 0}
          }
        })
        // 获取坐标
        UE.api.Public.pickupCoordinate(true,function (data) {
          console.log('坐标', data)
          // 点击添加标签
          let a = Math.random()
          UE.api.Label.addBalloon ({
            ID: a,
            Position: data,
            Html: `<div style='background-color: #90e343;color: #fff'>${a}</div>`,
            Pivot: 1,
            onClick: (options) =>{
              console.log(options)
              dialogVisible.value = true
            }
          })
        })
        // 获取构件id
        UE.api.Feature.getByEvent(true,(featureId) => {
          console.log('构件ID', featureId)
          fID = featureId
          const hasIdx = fIDList.findIndex(i => {
            return i === fID
          })
          if (hasIdx === - 1) {
            fIDList.push(fID)
            UE.api.Feature.setColor(featureId,"rgba(0,0,255,1)")
          } else {
            fIDList.splice(hasIdx, 1)
            UE.api.Feature.setColor(featureId,"rgba(255,255,255,1)")
          }
        })
      },
      {
        IsLod:true
      }
    )
  }

  function setA() {
    // 设置视角
    UE.api.Camera.setViewPort({
      "world":{
        location: {x: -13873.4970703125, y: 4800.623046875, z: 26048.115234375},
        origin: {x: 108.87999725341797, y: 34.20000076293945, z: 0},
        rotation: {x: 6.037694788574299e-7, y: -43.3857536315918, z: -88.44165802001953}
      }
    })

  }

  function setB() {
    // 漫游初始设置
    UE.api.Camera.setImmersiveRoamConfig(
      {
        roamingMode: "Flight",
        moveRate: 1,
        turnRate: 1,
        bRecordLocus: true,
        onIREnd:function(records){
          console.log(records)
        }
      }
    )
    // 漫游开始位置
    UE.api.Camera.startImmersiveRoam([-81095.035589, 21938.932525, 10754.025254])
    UE.api.Camera.stopImmersiveRoam()
    setTimeout(() => {
      // 重复播放漫游
      UE.api.Camera.playImmersiveRoam({
        records: [
          {
            "Time": 0,
            "Location": [
              -81095.0390625,
              21938.931640625,
              10754.025390625
            ],
            "Rotate": [
              0,
              0,
              0
            ]
          },
          {
            "Time": 1,
            "Location": [
              -81095.0390625,
              21938.931640625,
              10996.0234375
            ],
            "Rotate": [
              0,
              0,
              0
            ]
          },
          {
            "Time": 2,
            "Location": [
              -81095.0390625,
              21938.931640625,
              11591.875
            ],
            "Rotate": [
              0,
              0,
              0
            ]
          },
          {
            "Time": 3,
            "Location": [
              -81095.0390625,
              21938.931640625,
              12192.6328125
            ],
            "Rotate": [
              0,
              0,
              0
            ]
          },
          {
            "Time": 4,
            "Location": [
              -81095.0390625,
              21938.931640625,
              12424.8642578125
            ],
            "Rotate": [
              0,
              0,
              0
            ]
          }
        ],
        isLoopPlay: true,
        complete: function () {
          console.log('IR play complete.')
        },
      })
    }, 500)
  }

  function setC() {
    // 添加标签
    UE.api.Label.addBalloon ({
      ID: "tag1",
      Position:[-14333.171193, 3079.897045, 24285.758611],
      Html: "<div style='background-color: #90e343;color: #fff'>标签内容</div>",
      Pivot: 1,
      onClick: (options) =>{
        console.log(options)
        dialogVisible.value = true
      }
    })
    // 定位构件
    UE.api.Feature.zoomTo({
      featureId:"h^2000405451184",
      distanceRatio:3,
      flyHeading:0,
      flyPitch:-45
    })
  }

  function sliderChange(e) {
    UE.api.Feature.offset(e, 0, 0, "h^2000405451184", "h")
    UE.api.Label.removeBalloon("tag1")
    UE.api.Label.addBalloon ({
      ID: "tag1",
      Position:[-14333.171193 + e, 3079.897045, 24285.758611],
      Html: "<div style='background-color: #90e343;color: #fff'>标签内容</div>",
      Pivot: 1,
      onClick: (options) =>{
        console.log(options)
      }
    })
  }

  function initEngine () {
    let el = document.createElement('script')
    el.type = 'text/javascript'
    el.src = 'src/utils/BimGisPackage/BIMGISEngine_UE.js'
    document.head.appendChild(el)
  }

  // 拖动
  import { useDraggable } from '@vueuse/core'
  const move = ref<HTMLElement | null>(null)
  const DragData = useDraggable(move, {
    initialValue: { x: 140, y: 40 },
  })
  const x2 = ref(DragData.x)
  const y2 = ref(DragData.y)
  const style = ref(DragData.style)

</script>

<style>
  #UEgineContainer {
   width: 90vw;
   height: 90vh;
   border: 1px solid black;
   position: relative;
  }
</style>